<template>
    <div class="BangDan">
        <div>
            <h3>特色榜单</h3>
        </div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
            <van-cell v-for="item,index in list" :key="index"  @click="ClickList(item)" >
                <img :src="item.typeImg" class="BDimg">
                <div class="BDtitle1">{{item.typeTitle1}}</div>
                <div class="BDtitle2">
                    <span class="BDtitle2Z">
                         {{item.typeTitle2}}
                    </span>
                   
                </div>
            </van-cell>
        </van-list>
    </van-pull-refresh>
    </div>

</template>

<script setup>
import { ref,reactive,onMounted } from 'vue';
import { useRouter } from 'vue-router';
import {getTSBangdan} from '../../api/bangdan'
const router = useRouter()
const refreshing = ref(false)
const loading = ref(false);
const finished = ref(false);

//加载数据函数

// 懒加载思路
// 请求获得的数据存在本地中的list1
// 加载的list初始获得list1中的前五条数据
// 下拉刷新时将list1的下五条数据push到list中
// 刷新页面
const list1=ref([])
const list = ref([])

// 下拉刷新函数
const onLoad = () => {
    // 异步更新数据
    let LLength= list1.value.length - list.value.length
    // 根据当前展示的列表数据进行异步更新操作
    setTimeout(() => {
        if(LLength>2){
            for (let i = 0; i < 2; i++) {
                list.value.push(list1.value[list.value.length]);
            }
        }else{
            for (let i = 0; i < LLength; i++) {
                list.value.push(list1.value[list.value.length]);
            }
        }
        // 加载状态结束
        loading.value = false;
        // 数据全部加载完成
        if (list.value.length >= 4) {
            finished.value = true;
        }
    }, 1000);
};
//点击后跳转到详情页
const ClickList=(item)=>{
    console.log(item);
    //将点击的榜单图片链接存到本地
    localStorage.setItem('bangdantupian',item.typeImg)
    // 路由跳转时
    router.push({name:'bangdanx',query:{data:`typeId=${item.typeId}`}})
}
// 实现下拉刷新功能
const onRefresh = ()=>{
    finished.value=false;
    loading.value = true;
    onLoad()
}

onMounted(async ()=>{
    let res = await getTSBangdan()
    list1.value = res.data.page.list
})
</script>

<style lang="scss" scoped>
.BangDan {
    padding: 20px;
    .van-cell{
        width: 335px;
        height: 200px;
        margin: 15px 15px 15px 0;
        background-color: blue;
        border-radius: 5px;
        position: relative;
        padding: 0;
        .BDimg{
            width: 335px;
            height: 200px;
        }
        .BDtitle1{
            position: absolute;
            bottom: 35px;
            left: 20px;
            font-size: 25px;
            width: 300px;
            text-align: center;
            color: #ffffff;
        }
        .BDtitle2{
            position: absolute;
            bottom: 10px;
            left: 10px;
            font-size: 12px;
            width: 330px;
            text-align: center;
            color: #ffffff;
            .BDtitle2Z{
                width: 120px;
                height: 20px;
                border-radius: 15px;
                background-color: #666;
                opacity: 0.5;
            }
        }
    }
}
</style>